<script setup>
import { defineProps, toRefs } from "vue";
const  props  = defineProps(['msg'])
const {msg}=toRefs(props)
const changeNum=(i)=>{
  if (msg.value.number+i!=-1) {
    msg.value.number+=i
  }
}
</script>

<template>
  <div class="product">
    <div class="product_img--min"> <!-- <div class="product_img--min"> -->
      <img :src="`http://www.dell-lee.com/imgs/vue3/${msg.imgName}.png`" alt="">
    </div>
    <div class="product_content">
      <div class="product_content_title">{{ msg.title }}</div>
      <!-- <div class="product_content_sales">月售 {{ props.product.sales }} 件</div> -->
      <slot></slot>
      <div class="product_content_price">￥{{ msg.price }} <span class="product_content_old_price">￥{{ msg.oldPrice
          }}</span></div>

    </div>
    <div class="product_number">
      <span class="product_number_minus" @click="changeNum(-1)">-</span>
      {{ msg.number }}
      <span class="product_number_plus" @click="changeNum(1)">+</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';

.product {
  padding: .18rem;
  box-sizing: border-box;
  display: flex;
  position: relative;
  border-bottom: .01rem solid$content-bgColor;

  &_img {
    width: .68rem;
    margin-right: .18rem;

    img {
      width: .68rem;
      height: .68rem;
    }
  }

  &_img--min {
    width: .48rem;
    margin-right: .18rem;

    img {
      width: .48rem;
      height: .48rem;
    }
  }

  &_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    &_title {
      font-size: .14rem;
      font-weight: bold;
      color: $content_fontcolor;
      @include ellipse;
    }

    &_price {
      color: $hightlight-fontColor;
    }

    &_old_price {
      color: $light-fontColor;
      text-decoration: line-through;
    }
  }

  &_number {
    position: absolute;
    right: .18rem;
    bottom: .18rem;

    &_minus,
    &_plus {
      display: inline-block;
      width: .2rem;
      height: .2rem;
      border-radius: 50%;
      font-size: .16rem;
      text-align: center;
    }

    &_minus {
      border: .01rem solid $medium-fontColor;
      color: $medium-fontColor;
      margin-right: .08rem;
    }

    &_plus {
      background-color: $btn-bgColor;
      color: $bgColor;
      margin-left: .08rem;
    }
  }
}
</style>